<template>
  <div class="about">
    <!-- <h1>购物车</h1> -->
    <!-- <el-button type="danger" @click="remove">清空收藏夹</el-button> -->
    <div class="coll">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <input type="checkbox" checked class="j-checkbox" />
          <div class="shopname">{{ item.name }}</div>
          <div class="p-num">
            <div class="quantity-form">
              <span @click="reduce">-</span>
              <input type="text" class="itxt" value="1" />
              <span @click="add">+</span>
            </div>
          </div>
          <div class="price">{{ item.price }}</div>
          <div class="dele" @click="deleStore(index)">删除</div>
        </li>
      </ul>
    </div>
    <div>总价:{{ TotalPrice }}</div>
  </div>
</template>
<script>
import { onMounted, ref, defineComponent, computed } from 'vue'
// import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    let store = useStore()
    const list = ref([])
    onMounted(() => {
      val()
      a()
    })
    // 获取本地收藏----筛选过滤相同
    const val = () => {
      list.value = JSON.parse(localStorage.getItem('Shop'))
      // var result = []
      // var obj = {}
      // if (!list.value) {
      //   return
      // } else {
      //   for (var i = 0; i < list.value.length; i++) {
      //     if (!obj[list.value[i].data.price]) {
      //       result.push(list.value[i])
      //       obj[list.value[i].data.price] = true
      //     }
      //   }
      //   list.value = result
      // }
      // console.log(list.value)
    }
    const add = () => {
      let itxt = document.querySelector('.itxt').value
      console.log(itxt)
    }
    const reduce = () => {}
    let index = ref()
    const deleStore = (i) => {
      index.value = i
      list.value.splice(index.value, 1)
      localStorage.setItem('Shop', JSON.stringify(list.value))
    }
    const Num = ref(0)
    const a = () => {
      let check = document.getElementsByClassName('itxt')
      for (let i = 0; i < check.length; i++) {
        console.log(check[i].value)
        Num.value += check[i].value
      }
    }
    const TotalPrice = computed(() => {
      return Num.value
    })
    return {
      store,
      list,
      add,
      reduce,
      deleStore,
      index,
      TotalPrice,
      a,
      Num,
    }
  },
})
</script>
<style lang="less" scoped>
.about {
  h1 {
    text-align: center;
  }
  .coll {
    margin-top: 10px;
    ul {
      margin: 0 20px;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        cursor: pointer;
        margin: 10px 0;
        .j-checkbox {
          width: 20px !important;
          height: 20px !important;
        }
        .shopname {
          flex: 0.5;
        }

        .p-num {
          width: 80px;
          flex: 0.3;
          .quantity-form {
            display: flex;
            align-items: center;

            span {
              border: 1px solid #cacbcb;
              height: 25px;
              line-height: 25px;
              padding: 1px 0;
              width: 25px;
              text-align: center;
              color: #666;
              margin: 0;
              background: #fff;
              margin-left: -1px;
            }
            .itxt {
              float: left;
              border: 1px solid #cacbcb;
              width: 42px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              padding: 1px;
              margin: 0;
              margin-left: -1px;
              font-size: 14px;
              font-family: verdana;
              color: #333;
              -webkit-appearance: none;
            }
          }
        }
        .dele {
          color: red;
        }
      }
    }
  }
}
</style>
